<script setup lang="ts">
import { useStorage } from '@vueuse/core'
import { BrowserWindowApi } from '@widget-js/core'
import { computed } from 'vue'
import EmptyView from '@/component/EmptyView.vue'

defineProps({
  errorMsg: {
    type: String,
    required: false,
  },
  loading: {
    type: Boolean,
    required: false,
  },
  checkApiKey: {
    type: Boolean,
    required: false,
    default: true,
  },
})
const apiKey = useStorage('apiKey', '')
const apiHost = useStorage('apiHost', '')
function viewTutorial() {
  BrowserWindowApi.openUrl('https://www.bilibili.com/video/BV1XQ4y1v7wS/?share_source=copy_web&vd_source=d97a783ed15a74f48591bd6098a158a4&t=39', { external: true })
}

function viewQWeather() {
  BrowserWindowApi.openUrl('https://console.qweather.com/#/console', { external: true })
}
const msg = computed(() => {
  if (!apiKey.value && !apiHost.value) {
    return '请设置 和风天气 API KEY/API HOST'
  }
  else if (!apiKey.value) {
    return '请设置 和风天气 API KEY'
  }
  else if (!apiHost.value) {
    return '请设置 和风天气 API HOST'
  }
  return ''
})
</script>

<template>
  <widget-wrapper>
    <template v-if="checkApiKey && (!apiKey || !apiHost)">
      <EmptyView>
        <div class="flex flex-col gap-4 items-center">
          <span>{{ msg }}</span>
          <div class="flex flex-wrap gap-1 items-center justify-center">
            <el-button class="w-20" type="primary" @click.stop="viewTutorial">
              视频教程
            </el-button>
            <span />
            <el-button class="w-20" type="warning" @click.stop="viewQWeather">
              申请地址
            </el-button>
          </div>
        </div>
      </EmptyView>
    </template>
    <template v-else-if="errorMsg">
      <EmptyView :msg="errorMsg" />
    </template>
    <template v-else>
      <slot />
    </template>
  </widget-wrapper>
</template>

<style scoped lang="scss">

</style>
